/*
  学习目标：修复404匹配问题
*/
import '@/assets/styles/index.scss';
import history from '@/utils/history';
import React, { Suspense } from 'react';
import { Redirect, Route, Router, Switch } from 'react-router-dom';
import AuthRoute from './components/AuthRoute';
import KeepAlive from './components/KeepAlive';
import Test from './pages/Test';

const Article = React.lazy(() => import('@/pages/Article'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'));
const ProfileFeedback = React.lazy(() => import('@/pages/Profile/Feedback'));
const Result = React.lazy(() => import('@/pages/Search/Result'));
const Layout = React.lazy(() => import('@/pages/Layout'));
const Login = React.lazy(() => import('@/pages/Login'));
const Search = React.lazy(() => import('@/pages/Search'));
const NotFound = React.lazy(() => import('@/pages/NotFound'));

export default function App() {
  return (
    <Router history={history}>
      <Suspense fallback={<div>...加载中...</div>}>
        <KeepAlive path="/layout" component={Layout} />
        <Switch>
          <Redirect from="/" to="/layout/home" exact />
          <Route path="/login" component={Login} />
          <Route path="/article/:id" component={Article} />
          <Route path="/search/result" component={Result} />
          <Route path="/search" component={Search} />
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <Route path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />
          <Route path="/test" component={Test} />
          <Route
            render={(_props) => {
              // 1.非/layout开头的统一404处理，/layout开的返回null不处理
              if (_props.location.pathname.startsWith('/layout')) return null;
              return <NotFound />;
            }}
          />
        </Switch>
      </Suspense>
    </Router>
  );
}
